<template>
  <div class="wrap">
    <div class="header">
      <span>流程图 Demo</span>
      <el-tooltip content="下载" placement="bottom" effect="light">
        <el-button icon="el-icon-close" circle @click="exp('delete')"></el-button>
      </el-tooltip>
    </div>
    <div class="content">
      <div id="stencil" class="sider"/>
      <div class="panel">
        <div id="container" class="x6-graph"/>
      </div>
    </div>


  </div>
</template>

<script>
  import {Graph, Addon, FunctionExt, Shape,DataUri } from '@antv/x6'

  const { Rect, Circle,Ellipse,Polygon,Polyline, } = Shape

export default {
    data () {
      return {
        graph: {},
        history: {},
        canUndo: false,
        canRedo: false,
        id: '',
        ruleList: [],
        stencilShapeList: [],
        sceneInfo: [],
        addOrUpdateVisible: false
      }
    },
    components: {
    },
    mounted () {
      this.init()
        this.initStencil()
    },
    methods: {
        exp(dataUri){
            this.graph.toPNG((dataUri) => {
                // 下载
                DataUri.downloadDataUri(dataUri, 'chart.png')
            })
        },

        init(){
            this.graph = new Graph({
                container: document.getElementById('container'),
                panning: true,//支持拖拽平移
                width: 800,
                height: 600,

                // scroller: {
                //     enabled: true,
                //     pannable: true,
                //     pageVisible: true,
                //     pageBreak: false,
                // },
                mousewheel: {
                    enabled: true,//是否开启滚轮缩放交互
                    modifiers: ['ctrl', 'meta'],//修饰键
                },

                background: {
                    color: '#fffbe6', // 设置画布背景颜色
                },
                grid: {
                    size: 10,      // 网格大小 10px
                    visible: true, // 渲染网格背景
                },

            });

            const data = {
                // 节点
                nodes: [
                    {
                        id: 'node1', // String，可选，节点的唯一标识
                        x: 40,       // Number，必选，节点位置的 x 值
                        y: 40,       // Number，必选，节点位置的 y 值
                        width: 80,   // Number，可选，节点大小的 width 值
                        height: 40,  // Number，可选，节点大小的 height 值
                        label: 'hello', // String，节点标签
                    },
                    {
                        id: 'node2', // String，节点的唯一标识
                        x: 160,      // Number，必选，节点位置的 x 值
                        y: 180,      // Number，必选，节点位置的 y 值
                        width: 80,   // Number，可选，节点大小的 width 值
                        height: 40,  // Number，可选，节点大小的 height 值
                        label: 'world', // String，节点标签
                    },
                ],
                // 边
                edges: [
                    {
                        source: 'node1', // String，必须，起始节点 id
                        target: 'node2', // String，必须，目标节点 id
                    },
                ],
            };



            this.graph.centerContent()//将画布内容中心与视口中心对齐
            this.graph.fromJSON(data)



            const source = this.graph.addNode({
                shape: 'html',
                x: 120,
                y: 50,
                width: 120,
                height: 50,
                html: () => {
                    const wrap = document.createElement('div')
                    wrap.style.width = '100%'
                    wrap.style.height = '100%'
                    wrap.style.display = 'flex'
                    wrap.style.alignItems = 'center'
                    wrap.style.justifyContent = 'center'
                    wrap.style.border = '2px solid #9254de'
                    wrap.style.background = '#efdbff'
                    wrap.style.borderRadius = '4px'
                    wrap.innerText = 'Hello'
                    return wrap
                },
            })

            const wrap = document.createElement('div')
            wrap.style.width = '100%'
            wrap.style.height = '100%'
            wrap.style.display = 'flex'
            wrap.style.alignItems = 'center'
            wrap.style.justifyContent = 'center'
            wrap.style.background = '#ffd591'
            wrap.style.border = '2px solid #ffa940'
            wrap.style.borderRadius = '4px'
            wrap.innerText = 'World'

            const target = this.graph.addNode({
                shape: 'html',
                x: 320,
                y: 260,
                width: 120,
                height: 50,
                html: wrap,
            })

            this.graph.addEdge({
                source,
                target,
            })

            this.graph.addNode({
                shape: 'polygon',
                x: 40,
                y: 40,
                width: 80,
                height: 80,
                label: 'polygon',
                attrs: {
                    body: {
                        fill: '#efdbff',
                        stroke: '#9254de',
                        refPoints: '0,10 10,0 20,10 10,20',
                    },
                },
            })

            this.graph.on('node:mouseenter', ({ node }) => {
                if (node === target) {
                    node.addTools({
                        name: 'button-remove',
                        args: {
                            x: 0,
                            y: 0,
                            offset: { x: 10, y: 10 },
                        },
                    })
                }
            })

            this.graph.on('node:mouseleave', ({ node }) => {
                if (node === target) {
                    node.removeTools()
                }
            })
        },

        // 侧边栏
        initStencil () {
            this.stencil = new Addon.Stencil({
                target: this.graph,
                stencilGraphWidth: 280,
                // search: {rect: true},//搜索栏
                collapsable: true,
                groups: [
                    {
                        name: 'basic',
                        title: '节点',
                        graphHeight: 900
                    }
                ]
            })
            const stencilContainer = document.querySelector('#stencil')
            stencilContainer.appendChild(this.stencil.container)
            const r = new Rect({
                width: 70,
                height: 40,
                attrs: {
                    rect: { fill: '#31D0C6', stroke: '#4B4A67'},
                    text: { text: 'rect', fill: 'white' },
                },
            })

            const c = new Circle({
                width: 60,
                height: 60,
                attrs: {
                    circle: { fill: '#FE854F',  stroke: '#4B4A67' },
                    text: { text: 'Circle', fill: 'white' },
                },
            })
            const e = new Polygon({
                x: 40,
                y: 40,
                width: 80,
                height: 80,
                attrs: {
                    fill: '#efdbff',
                    stroke: '#9254de',
                    refPoints: '0,10 10,0 20,10 10,20',
                },
            })
            this.stencil.load([r, c,e], 'basic')
        },
    }
  }
</script>

<style lang="scss">

  html,
  body,
  #root {
    height: 100%;
  }

  body {
    margin: 0;
  }

  .x6-widget-snapline-vertical {
    border-right-color: #ff4e50 !important;
  }

  .x6-widget-snapline-horizontal {
    border-bottom-color: #ff4e50 !important;
  }

  .x6-widget-selection-box {
    border: 1px dashed #5f95ff;
  }

  .x6-widget-selection-inner {
    border: 1px dashed #5f95ff;
  }

  .x6-widget-stencil-content {
    height: 1000px;
  }

  @keyframes stroke {
    100% {
      stroke-dashoffset: -400;
    }
  }

  .animate-text1,
  .animate-text2,
  .animate-text3,
  .animate-text4 {
    font-weight: bold;
    fill: none;
    stroke-width: 2px;
    stroke-dasharray: 90 310;
    animation: stroke 3s infinite linear;
  }

  .animate-text1 {
    stroke: #873bf4;
    text-shadow: 0 0 2px #873bf4;
    animation-delay: -1.5s;
  }

  .animate-text2 {
    stroke: #ff6e06;
    text-shadow: 0 0 2px #ff6e06;
    animation-delay: -3s;
  }

  .wrap {
    width: 100%;
    height: 100%;

    .header {
      display: flex;
      justify-content: space-between;
      height: 48px;
      line-height: 48px;
      padding-left: 16px;
      padding-right: 32px;
      background: #fff;
      box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
      position: relative;
      color: rgba(0, 0, 0, 0.45);
    }

    .content {
      display: flex;
      height: calc(100% - 48px);

      .sider {
        position: relative;
        width: 290px;
        height: 100%;
        border-right: 1px solid rgba(0, 0, 0, 0.08);
      }

      .panel {
        height: 100%;

        .toolbar {
          display: flex;
          align-items: center;
          height: 38px;
          background-color: #f7f9fb;
          border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        }
      }

      .config {
        box-sizing: border-box;
        width: 290px;
        height: 100%;
        padding: 0 24px;
        border-left: 1px solid rgba(0, 0, 0, 0.08);
      }
    }
  }


</style>
